<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!-- 基本概念
Promise是异步编程的一种解决方案，比传统的解决方案一一回调函数和事件一一更合理和更强大。
它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。


所谓Promise,简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。
从语法上说，Promise是一个对象，从它可以获取异步操作的消息。
Promise提供统一的API,各种异步操作都可以用同样的方法进行处理

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。
此外，Promise对象提供统一的接口，使得控制异步操作更加容易 -->

<div id="box"></div>

<script>

// 基本用法
// ES6规定，Promise对象是一个构造函数，用来生成Promise实例

// const promise = new Promise(function(resolve,reject){
//     //...some code
//     if(/* 异步操作成功 */){
//         resolve(value);
//     }else{
//         reject(error);
//     }
// });


// Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JavaScript引擎提供，不用自己部署

// Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

// promise.then(function(value){
// //success
// },function(error){
// //failure
// });
    var box = document.getElementById("box");

    function loadImageAsync(url){
        const promise = new Promise(function(resolve,reject){
            //异步处理，消耗时间的代码
            const image = new Image();//创建image对象
            image.src = url;
            image.onload = function(){
                resolve(image);
            }
            image.onerror = function(){
                reject(new Error("Could not load image at" + url))
            }
        })
        return promise;
    }
    const promise = loadImageAsync("https://pic3.zhimg.com/v2-ab5ec1829a03731b7658a35e744bd79e_r.jpg");
    promise.then(function(data){
        //成功
        box.appendChild(data)
    },function(error){
        //失败
        box.innerHTML = "图片加载失败";
        console.log(error);
        
    })




</script>

</body>
</html>